<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <c:import url="/WEB-INF/jsp/frontend/head.jsp" />
    <c:import url="/WEB-INF/jsp/frontend/activity/script.jsp" />
    <link rel="stylesheet" href="<spring:url value="/css/aos.css"/>" />
    <link rel="stylesheet" href="<spring:url value="/css/blogList.css?v=1.1"/>" />
</head>
<body id="body">
<c:import url="/WEB-INF/jsp/frontend/header.jsp" />

<div class="blog-body">

    <div class="blog-title">
        <p class="blog-name">文章发布区</p>


        <div>
            <a href="#" class="blog-option blog-good">精选文章</a>
            <a href="#" class="blog-option">今日热门</a>
            <a href="#" class="blog-option">最新文章</a>
        </div>
    </div>

    <div class="blog-add">
        <div class="blog-sort">
            <div class="blog-open-sort-option">
                <a class="blog-sort-option blog-sort-option1" href="<spring:url value="/blogList?p=${page.currentPage}&option=1"/>">按更新时间</a>
                <img class="sort-icon" src="<spring:url value="/images/login.png"/>">
            </div>
            <div class="blog-other-option1">
                <div class="blog-other-option">
                    <div style="overflow: hidden;border-right: 1px solid #004896;float: left">
                        <a class="blog-sort-option blog-sort-option2" href="<spring:url value="/blogList?p=${page.currentPage}&option=2"/>">按赞同数</a>
                    </div>
                    <a class="blog-sort-option blog-sort-option3" href="<spring:url value="/blogList?p=${page.currentPage}&option=3"/>">按阅读量</a>
                </div>
            </div>
        </div>
        <script>


            $(document).ready(function () {


                var clickSum = 1;
                var openSort = $(".blog-open-sort-option");
                var option1 = $(".blog-sort-option1");
                var option2 = $(".blog-sort-option2");
                var option3 = $(".blog-sort-option3");
                var option = $(".blog-sort-option");
                var sortIcon = $(".sort-icon");

                if(${option} == 2){
                    option1.insertAfter(option2);
                    option2.insertBefore(sortIcon);
                }

                if(${option} == 3){
                    option1.insertAfter(option3);
                    option3.insertBefore(sortIcon);
                }


                option.each(function() {
                    $(this).click(function () {
                        if($(this).parent().attr('class') == "blog-open-sort-option") {
                            $(".blog-other-option1").animate({width:"toggle"},300);
                            if (clickSum) {
                                $(".sort-icon").css({
                                    transition: 'transform 0.2s',
                                    transform: 'rotate(270deg)'
                                });
                                clickSum--;
                            } else {
                                $(".sort-icon").css({
                                    transition: 'transform 0.2s',
                                    transform: 'rotate(0deg)'
                                });
                                clickSum++;
                            }
                            return false;
                        }
                        sortIcon.prev().insertAfter($(this));
                        $(this).insertBefore(sortIcon);
                    })
                })

            })

        </script>
        <div class="blog-post" onclick="window.location.href='/newBlog'"><p>发表文章</p></div>
    </div>

    <div class="blog-list" aos="flip-up">
        <ul>
            <c:forEach var="classify" items="${page.list}" varStatus="s">
            <li>
                <div class="blog-time"><fmt:formatDate value="${classify.blogCreateTime}" type="date" dateStyle="default"/></div>
                <div class="blog-author">${classify.userName}</div>
                <div class="blog-summary"><a href="<spring:url value="/readBlog?pid=${classify.blogId}"/>" onclick="addReadNum(${classify.blogId})" >${classify.blogSummary}</a></div>
                <div class="blog-like"><img src="<spring:url value="/images/like.png"/>"><p>${classify.blogLikeNum}</p></div>
                <div class="blog-like blog-view"><img src="<spring:url value="/images/view.png"/>"><p>${classify.blogReadNum}</p></div>
            </li>
            </c:forEach>



            <script>
                function addReadNum(blogId){
                        jQuery.post("addReadNum", {
                            pid: blogId}, function (res) {
                            if (res === "true") {
                            }
                        });
                }

            </script>
        </ul>

        <div class="page-split">
            <ul>

                <%--解决显示的对齐问题--%>
                <script>
//                    $(".blog-author").each(function () {
//                        var author = $(this).text();
//                        if (author.length > 4) { $(this).text(author.substring(0,4)+"...")};
//                    })

                    $(".blog-summary").each(function () {
                        var author = $(this).text();
                        if (author.length == 0) { $(this).find("a").text("无题")};
                    });

                    $(".blog-like").each(function () {
                        var author = $(this).find("p").text();
                        if (author > 999) { $(this).find("p").text("999+")};
                    });

//                    $(".blog-summary").each(function () {
//                        var author = $(this).text();
//                        if (author.length > 50) { $(this).text(author.substring(0,50)+"...")};
//                    })



                </script>
                <c:if test="${page.currentPage>0}">
                <li class="page-last">
                        <a href="<c:url value='/blogList?p=1&${option}'/>">首页</a>
                </li>
                </c:if>


                <c:if test="${page.currentPage>1}">
                <li class="page-next">
                    <div class="page-next-container">
                            <a href="<c:url value='/blogList?p=${page.currentPage-1}&option=${option}'/>">< 上一页</a>
                    </div>
                </li>
                </c:if>

                <c:forEach var="t" begin="1" end="${page.totalPage}">
                    <c:choose>
                        <c:when test="${page.currentPage == t}">
                            <li class="page-number" style="border: none">
                                <a style="border: none">${t}</a>
                            </li>
                        </c:when>
                        <c:otherwise>
                            <li class="page-number">
                                <a href="<c:url value='/blogList?p=${t}&option=${option}'/>">${t}</a>
                            </li>
                        </c:otherwise>
                    </c:choose>
                </c:forEach>

                <c:if test="${page.currentPage<page.totalPage}">
                <li class="page-next">
                    <div class="page-next-container">
                        <a href="<c:url value='/blogList?p=${page.currentPage+1}&option=${option}'/>">下一页 ></a>
                    </div>
                </li>
                </c:if>

                <c:if test="${page.currentPage<=page.totalPage}">
                <li class="page-last">
                            <a href="<c:url value='/blogList?p=${page.totalPage}&option=${option}'/>">尾页</a>
                </li>
                </c:if>
            </ul>

        </div>



    </div>
</div>

<script src="<spring:url value="/js/aos.js"/>"></script>
<script>
    AOS.init({
        easing: 'ease-out-back',
        duration: 1000
    });
</script>
<script type="text/javascript">
    window.onload = function() {
        //配置
        var config1 = {
            vx: 2,  //小球x轴速度,正为右，负为左
            vy: 2,  //小球y轴速度
            height: 2,  //小球高宽，其实为正方形，所以不宜太大
            width: 2,
            count: 140,      //点个数
            color: "43,43,43",  //点颜色
            stroke: "43,43,43",      //线条颜色
            dist: 8000,    //点吸附距离
            e_dist: 20000,   //鼠标吸附加速距离
            border_radius: 20,
            max_conn: 1   //点到点最大连接数
        };

        var body1 = document.getElementById("body");

        CanvasParticle(config1,body1);

    }
</script>


<c:import url="/WEB-INF/jsp/frontend/footer.jsp" />
</body>
</html>